<template>
  <div>
    <a-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人中心</span>
      </div>
      <a-row style="margin: 5px">
        <a-col :span="12">用户名：</a-col>
        <a-col :span="12">{{userInfo.username}}</a-col>
      </a-row>
      <a-row  style="margin: 5px">
        <a-col :span="12">电  话： </a-col>
        <a-col :span="12">{{userInfo.phone}}</a-col>
      </a-row>
      <a-row  style="margin: 5px">
        <a-col :span="12">email：</a-col>
        <a-col :span="12">{{userInfo.email}}</a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import store from "@/store";
import {message} from "ant-design-vue";

export default {
  name: "PersonalCenter",
  data(){
    return {
      userInfo:{}
    }
  },
  beforeRouteEnter(to,from,next){
    if (store.state.user.isGetInfo){
      next(vm => vm.setUserInfo(store.state.user.info))
    }else {
      console.log('Home:beforeRouteEnter:GetUserInfo')
      this.$store.dispatch('GetUserInfo').then(res=>{
        next(vm =>vm.setUserInfo(res.data))
      }).catch(err=>{
        message.error('Personal:beforeRouteEnter:'+err.message)
      })
    }

  },
  methods:{
    setUserInfo(res){
      this.userInfo = res
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  margin: 20px;
  width: 300px;
}
</style>
